<html><head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layuilast.css" media="all">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

<body>
<div id="tabDIV" style="display: block">
    <div class="layui-row" style="margin-top: 3vh;">

        <div class="layui-inline">
            <label class="layui-form-label">设备编号</label>
            <div class="layui-input-inline">
                <input type="text" id="deviceMac1" autocomplete="off" class="layui-input" placeholder="设备编号">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">使用人名称</label>
            <div class="layui-input-inline">
                <input type="tel" id="deviceUser1" autocomplete="off" class="layui-input" placeholder="填写使用人名称">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">使用人手机号</label>
            <div class="layui-input-inline">
                <input type="tel" id="devicePhone1" autocomplete="off" class="layui-input" placeholder="填写使用人手机号">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">设备所在城市</label>
            <div class="layui-input-inline">
                <input type="tel" id="city1" autocomplete="off" class="layui-input" placeholder="填写设备所在城市">
            </div>
        </div>

        <div class="layui-inline" style="float: right;margin-top: 1vh;margin-right: 1vh">
            <button class="layui-btn" onclick="reset()">
                <i class="layui-icon layui-icon-delete"></i>清除
            </button>
            <button class="layui-btn" onclick="search()">
                <i class="layui-icon layui-icon-search"></i>查询
            </button>
        </div>
    </div>
    <table id="table" lay-filter="table"></table>
</div>
 <div id="editForm" style="display: none; height: 100%;margin-top: 30px;">
        <form class="layui-form" id="updateForm" enctype="multipart/form-data">
            <input type="hidden" name="id">


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备编号</label>
                    <div class="layui-input-block">
                        <input id="deviceMac" type="text" name="devicesn" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="devicedesc" id="deviceDes" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备管理人</label>
                    <div class="layui-input-block">
                        <input type="text" name="adminname" id="rePwd" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">管理人手机号</label>
                    <div class="layui-input-block">
                        <input type="text" id="adminphone" name="adminphone" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备所在城市</label>
                    <div class="layui-input-block">
                        <input type="text" name="city" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备经度</label>
                    <div class="layui-input-block">
                        <input type="text" name="jingdu" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备纬度</label>
                    <div class="layui-input-block">
                        <input type="text" name="weidu" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <a href="http://api.map.baidu.com/lbsapi/getpoint/index.html?qq-pf-to=pcqq.c2c" target="_blank" style="text-decoration:underline;margin-left: 11%;color: #0000FF">根据地址获取经纬度</a>
        </form>
    </div>



<script charset="utf-8" src="../../layui/js/jquery/jquery.js"></script>
<script charset="utf-8" src="../../layui/js/jquery/jquery.serializeJSON.js"></script>
<script charset="utf-8" src="../../layui/layuilast.js"></script>
<script charset="utf-8" src="../../layui/js/md5/md5.min.js"></script>
<script charset="utf-8" src="../../layui/js/extend/common.js"></script>
<!--<script src="../../js/http.js"></script>-->
<script type="text/javascript">
var  rootUrl=localStorage.getItem('rootUrl');
    var pageURL =rootUrl+ "/binder/getBinderListByAdmin";
    var tableId = "table";
    var cols=[
        [{
                title: '序号',
                templet: '#indexTpl',
                width: 50
            },
            // {field: 'id',title: '用户ID', hide:false},
            {
                field: 'deviceSn',
                title: '设备编号'
            },
            {
                field: 'deviceDesc',
                title: '设备描述'
            },
            {
                field: 'adminName',
                title: '设备使用人'
            },
            {
                field: "adminPhone",
                title: '使用人手机'
            },
            {
                field: "address",
                title: '设备地址'
            },
            {
                field: "city",
                title: '设备所在城市'
            },
            {field: "isOperator", title: '是否授权',templet : '#isEnableStatus', width : 130},
            // {field: "isDelete", title: '是否禁用',templet : '#isEnableStatus', width : 130},
           {
                toolbar: "#barDemo",
               align: 'center',
                title: '操作',
                 width: 254,
                 align: 'left'
             }
        ]
 
    ];

    //表格数据初始化
    if(!localStorage.getItem('token')||!localStorage.getItem('userid')){
        window.location.href='../login/login.html'
    }else{
        initTab(tableId, "#table", "table", pageURL, cols,  {
            adminuserid:localStorage.getItem('userid'),
            userid:localStorage.getItem('userid'),
            token:localStorage.getItem('token')
        }, null);
    }

    function reset() {
       /* $("#deviceMac1").val("");
        $("#deviceUser1").val("");
        $("#devicePhone1").val("");
        $("#city1").val("");*/
		window.location.reload();
    }

    //条件查询
    function search(){
        let devicesn = $("#deviceMac1").val().trim();
        let username = $("#deviceUser1").val().trim();
        let userphone = $("#devicePhone1").val().trim();
        let city = $("#city1").val().trim();
        console.log(devicesn)
          var url = rootUrl+"/binder/getBinderListByDeviceSnAndUserNameAndUserPhoneAndCityAndAdmin";
        						
            initTab(tableId, "#table", "table", url, cols,  {
                adminuserid:localStorage.getItem('userid'),
                userid:localStorage.getItem('userid'),
                token:localStorage.getItem('token'),
        					devicesn: devicesn,
        					username: username,
        					userphone: userphone,
        					city: city,
            }, null);
    }

    //打开编辑框
    function openEditForm(type,binderid) {
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            // skin: 'layui-layer-rim', //加上边框
            area: ['80%', '80%'], //宽高
            anim: 2,
            shadeClose: true, //开启遮罩关闭,
            maxmin: true,
            title: "编辑用户信息",
            content: $("#editForm"),
            btn: ['提交', '关闭'],
            yes: function(index, layero) {
                
                var data = $('#updateForm').getData();
                const formData = new FormData($("#updateForm" )[0]);
                var deviceMac = $("#deviceMac").val().trim();
                data.deviceMac = deviceMac;
                for (var key in data) {
                    var element = data[key];
                    if (key != "id") {
                        console.log("key----->" + key + "  element = " + element)
                        if (element == null || element == '' || element == undefined) {
                            layer.alert("表单数据没有填写完全!");
                            return;
                        }
                    }
                }
                formData.append('token',localStorage.getItem('token')),
                formData.append('userid',localStorage.getItem('userid'))
				
                switch (type){                  
                    case 'edit':
					
                    formData.append('binderid',binderid)
					$.ajax({
            url: rootUrl+"/binder/modifyBinder",
            asynnc:false,
            cache:false,            
            data: formData,
            dataType: 'json',
            contentType: false,
             processData: false,
            type: 'post',
            success: function(res){
                if (res.errorcode == 0) {
				layer.msg(res.resultmsg);
                    //location.reload();
                }else{
                   layer.msg(res.resultmsg);
                }
				
            },
            error: function(res) {
                // 服务器繁忙
                alert('服务器繁忙');
            },

        });
                             
                            break; 
				
                }    
            }
        });
    }//
    layui.use(['table', 'form', 'upload'], function () {
        var table = layui.table;
        var form = layui.form();
		//console.log(form);
        var upload = layui.upload;
		// //启用禁用开关
      form.on('switch(isEnable)', function (obj) {
             var isOperator;
            var tips;
           var title;
           
             if (obj.elem.checked) {
              
				  title="确定授权吗";
                tips="确定授权吗";
                 isOperator =1;
            } else {
                 isOperator = 0;
                 title="确定取消授权";
                 tips="确定取消授权吗";
            }
			//console.log("isOperator:"+isOperator);
			
            layer.confirm(tips, {title: title}, function (index) {
                 var id = obj.value;
                 layer.close(index);
				 //console.log(obj.value)
				  var binderid=obj.value;
				
				 $.ajax({
            url: rootUrl+"/binder/setBinderOperatorByBinderId",
            asynnc:false,
            cache:false,            
            data: {
			binderid:binderid,						
            userid:localStorage.getItem('userid'),
            token:localStorage.getItem('token')
			},
            dataType: 'json',
            
            type: 'post',
            success: function(res){
                if (res.errorcode == 0) {
				layer.msg(res.resultmsg);
                    location.reload();
                }else{
                   layer.msg(res.resultmsg);
                }
				
            },
            error: function(res) {
                // 服务器繁忙
                alert('服务器繁忙');
            },

        });
       });  //end confirm          
   
         });//end switch
		 
		 //删除和修改
		 table.on('tool(table)', function(obj) {
		     var data = obj.data;
		     if (obj.event === 'edit') {
		         console.log(data);
		         $("#deviceMac").val(data.deviceSn);
		         $("#deviceDes").val(data.deviceDesc);
		         $("#rePwd").val(data.adminName);
		         $("#adminphone").val(data.adminPhone);
				 $("#jingdu").val(data.jindu);
				  $("#weidu").val(data.weidu);
		         $('#updateForm').loadData(data);
		         $("#deviceMac").attr("disabled", true);
		         form.render();
		         openEditForm('edit',data.binderId);
		     }
		 	if (obj.event === 'del') {
		 		console.log("del");				
		 	    console.log(data);
		 	    $.ajax({
		 	        url: rootUrl+"/binder/unbindDevice",
		 	        asynnc:false,
		 	        cache:false,            
		 	        data: {
		 	    	devicesn:data.deviceSn,
		 	    	
		 	    	userid:localStorage.getItem('userid'),
		 	        token:localStorage.getItem('token')
		 	    	},
		 	        dataType: 'json',
		 	       
		 	        type: 'post',
		 	        success: function(res){
		 	            if (res.errorcode == 0) {
		 	    		layer.msg(res.resultmsg);
		 	                location.reload();
		 	            }else{
		 	               layer.msg(res.resultmsg);
		 	            }
		 	    		
		 	        },
		 	        error: function(res) {
		 	            // 服务器繁忙
		 	            alert('服务器繁忙');
		 	        },
		 	    
		 	    });
		 	}
		 
		 });
    });//end use

       

        
</script>

<!-- 启用禁用开关-->
<script type="text/html" id="isEnableStatus">
    {{# if(d.isOperator == 1){ }}
    <input type="checkbox" value="{{d.binderId}}" lay-skin="switch" disabled lay-text="已授权|未授权" lay-filter="isEnable" checked="checked"/>
    {{# }else if(d.isOperator==0){ }}
    <input type="checkbox" value="{{d.binderId}}"  lay-skin="switch" lay-text="已授权|未授权" lay-filter="isEnable" />
    {{# } }}
</script>

<!--table的序号-->
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>



<!--table的操作按钮-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">管理</a>
   <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
<!--    <a class="layui-btn layui-btn-xs" lay-event="address">收货地址</a>-->
<!--    {{# if(d.type==3||d.type==5||d.type==6||d.type==7||d.type==8){ }}-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="addSales">添加销售</a>-->
<!--    {{# } }}-->
</script>

</body></html>